<link rel="stylesheet" href="__PUBLIC__/yksui/css/multi-select.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="wrapper">
        <div class="panel" id="nav">
            <div class="panel-heading"><h3 class="panel-title">销售员账号对应关系表</h3></div>
            <div class="panel-body">
                <form action="" method="get">
                    <div class="container-fluid">
                        <div class="col-sm-12 col-md-2 add-space">
                            <div class="input-group input-group-md">
                                <span class="input-group-addon">账号</span>
                                <select class="chosen-select form-control" tabindex="-1" name="orderState"
                                            data-name-group="common">
                                    <option>请选择</option>
                                    <option>无需确认</option>
                                    <option>已确认</option>
                                </select>
                                </div>
                        </div>
                        <div class="col-sm-12 col-md-2 add-space">
                            <div class="input-group input-group-md">
                                <span class="input-group-addon">站点</span>
                                 <select class="chosen-select form-control" tabindex="-1" name="orderState1"
                                            data-name-group="common">
                                    <option>请选择</option>
                                    <option>无需确认</option>
                                    <option>已确认</option>
                                </select>
                                </div>
                        </div>
                       <div class="col-sm-12 col-md-2 add-space">
                            <div class="input-group input-group-md">
                                <span class="input-group-addon">销售员</span>
                               <select class="chosen-select form-control" tabindex="-1" name="orderState3"
                                            data-name-group="common">
                                    <option>请选择</option>
                                    <option>无需确认</option>
                                    <option>已确认</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 add-space">
                            <input class="btn btn-primary" type="submit" value="搜索">
                            <input class="btn btn-primary" type="button" value="导出">
                        </div>
                    </div>
                </form>
                <div class="clearfix"></div>
                <hr>
                <div class="fixed-table-toolbar">
                    <h3>
                    <button type="button" class="btn btn-success " data-toggle="modal" data-target=".addRelation">+ 新增对应
                    关系</button>
                    <button type="button" class="btn btn-info">批量导入对应关系</button>
                    </h3>
                </div>
                <table class="table table-striped  table-hover" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <!-- <th width="20"><input id="checkAll" type="checkbox"></th> -->
                        <th width="40">序号</th>
                        <th>账号</th>
                       <!--  <th>站点</th> -->
                        <th>销售员</th>
                        <th>维护时间</th>
                        <th>操作</th>
                   </tr>
                    </thead>
                    <tbody>
                    <tr>
                    <!--<td class="text-center"><input name="subBox" type="checkbox" value="103"></td> -->
                        <td>1</td>
                        <td>Bsyexcellent-US</td>
                        <!-- <td>GB</td> -->
                        <td>高英 || 张三 || 李四</td>
                        <td>2017-03-05</td>
                        <td><button type="button" class="btn btn-info btn-sm add-space">修改</button></td>
                    </tr>
                    <!--<td class="text-center"><input name="subBox" type="checkbox" value="103"></td> -->
                        <td>1</td>
                        <td>Bsyexcellent-US</td>
                       <!--  <td>GB</td> -->
                        <td>高英</td>
                        <td>2017-03-05</td>
                        <td><button type="button" class="btn btn-info btn-sm add-space">修改</button></td>
                    </tr>                   
                    </tbody>
                </table>
                <div class="clearfix clear"></div>
                <div class="col-md-6 pull-left">
                    <label>每页 20 条记录
                        显示 1 到 20 项，共 75项</label>
                </div>
                <div class="col-md-6">
                    <div class="page pull-right" style="padding: 0;margin: 0">
                        <span class="current">1</span><a href="2.html">2</a><a href="3.html">3</a> <a href="2.html">下一页
                        </a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade addRelation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 
        aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增销售员账号对应关系</h4>
        </div>
        <div class="modal-body">
        <form action="" class="form-inline">
            <div class="form-group col-md-offset-3">
            <label for="">账号</label>
            <select type="text" name="creater" class="form-control" value="">
                <option>请选择</option>
                <option>无需确认</option>
                <option>已确认</option>
            </select>
            </div>
            <!--<div class="form-group">
            <label for="">站点</label>
            <select type="text" name="creater" class="form-control" value="">
                <option>请选择</option>
                <option>无需确认</option>
                <option>已确认</option>
            </select>
            </div>-->
        <!--<div class="form-group form-inline add-space"><label for="">销售员</label>
            <input type="text" name="countrySearch" class="form-control" placeholder="模糊搜索销售员名称">
            <button class="btn btn-info" type="button" id="searchCountry">搜索</button>
        </div>-->
        <hr>
        <div class="form-group add-space col-md-offset-2">
            <div class="input-group add-space col-md-5">
            <input type="text" class="form-control"  placeholder="模糊搜索销售员名称">
            <div class="input-group-addon btn-success">搜索</div>
            </div>
        <select multiple='multiple' class="searchable">
            <option value='elem_1' selected>elem 1</option>
            <option value='elem_2'>elem 2</option>
            <option value='elem_3'>elem 3</option>
            <option value='elem_4' selected>elem 4</option>
            <option value='elem_5'>elem 5</option>
            <option value='elem_6'>elem 6</option>
            <option value='elem_7'>elem 7</option>
            <option value='elem_8'>elem 8</option>
            <option value='elem_9'>elem 9</option>
            <option value='elem_10'>elem 10</option>
            <option value='elem_11'>elem 11</option>
            <option value='elem_12'>elem 12</option>
            <option value='elem_13'>elem 13</option>
        </select>
        </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="__PUBLIC__/yksui/js/jquery.multi-select.js"></script>
<script type="text/javascript">
// run pre selected options
$('.searchable').multiSelect();
</script>
<script>
    $(function () {
        $('select.chosen-select').chosen({
            no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
            disable_search_threshold: 2, // 10 个以下的选择项则不显示检索框
            search_contains: true         // 从任意位置开始检索
        });
    });

</script>